<template>
  <view>
    <view class="padding-top">
		<view v-for="(item,i) in message.channelsArr" :key="i"  class="cu-list menu card-menu sm-border borders" @tap="jumpBuy(item)">
			<view class="cu-item bg-white devices">
				<view class="content padding-tb-sm">
					<!-- 通道 -->
					<view>
						{{item.chnId+1}}
						<text v-if="localeLang==='en'">&nbsp;</text>
						<view style="display: inline-block;">
							<text v-if="item.chnId==0">{{$t('JLink.order.list.message.channel')}}</text>
							<text v-else>{{$t('JLink.order.list.message.channels')}}</text>
						</view>
					</view>
					<view class="text-sm">
						<!-- 已购买 -->
						<view v-if="item.expireTime.time" class=" text-gray">
							<view>
								<!-- 已到期，点击续费 -->
								<text v-if="item.expireTime.color==='reds'" class="text-reds">{{$t('JLink.deviceMessage.expire')}}</text>
								<!-- 正常使用 -->
								<text v-else class="text-primary">{{$t('JLink.deviceMessage.inNormal')}}</text>
							</view>
							<view>{{$t('JLink.publicText.expiration')}}:{{item.expireTime.time}}</view>
						</view>
						<!-- 未开通 -->
						<view v-else class="text-gray">{{$t('JLink.deviceMessage.unBuy')}}</view>
					</view>
				</view>
				<view class="action">
					<view v-if="item.expireTime.time">
						<!-- 续费 -->
						<button v-if="item.expireTime.color=='reds'" class="cu-btn round line-red text-sm">{{$t('JLink.publicText.renewal')}}</button>
						<!-- 云回放 -->
						<button v-else class="cu-btn round line-primary text-sm"  @tap.stop="cloudPlayback(item.chnId)">{{$t('JLink.deviceMessage.yun')}}</button>
					</view>
					<view v-else>
						<!-- 去开通 -->
						<button class="cu-btn round line-black text-sm">{{$t('JLink.deviceMessage.open')}}</button>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view style="height:160upx"></view>
	<!-- 云存储最大支持路数 -->
	<view class="padding-tb text-grey bg-white jf-foot text-center">{{$t('JLink.deviceMessage.channels.inform')}} ({{message['xmc.css.maxchannel']}})</view>
  </view>	
</template>

<script>
export default {
	components: {
	   devices
	},
	data() {
		return {
			message:{},//内容
			urlPrams:{//url参数
				classifyId:'',
				sn:''
			},
			localeLang:''
		}
   },
	onLoad(e) {
		const {deviceMessage,classifyId,sn} = e;
		this.urlPrams = {
			classifyId,
			sn
		}
		this.message = JSON.parse(deviceMessage);
	},
    onShow() {
		this.list = [
			{icon: 'xmcCss',text: this.$t('JLink.groups.xmcCss'),classifyId: 'xmc.css'},//云存储
			{icon: 'netCellular',text:this.$t('JLink.groups.netCellular'),classifyId:'net.cellular'},//流量
			// {icon: 'iccid',text:this.$t('JLink.groups.recharge'),classifyId:'iccid'},流量充值
		]
    },
    methods: {
	    jumpBuy (item){
			uni.hideToast();
			const { chnId, expireTime} = item;
			const { classifyId, sn } = state.urlPrams;
			const {normalUseChannel} = state.message;
			let maxChannel = state.message['xmc.css.maxchannel'];//云存储能使用的最大通道数
			let jumpUrl = ()=> this.$routing(`${this.$pages.buyDefault}?classifyId=${classifyId}&sn=${sn}&channel=${chnId}`);
			if(normalUseChannel>=maxChannel){//使用中的通道数大于等于最大通道数
				if(expireTime.time&&expireTime.color!='reds'){
					jumpUrl();
				}else{
					uni.showToast({
						title: this.$t('JLink.deviceMessage.channels.introduce'),
						icon:'none'
					});
				}
			}else{
				jumpUrl();
			}
		}
    }
}
</script>

<style lang="less" scoped>
	@import '@/common/style/main.css';
</style>
